<template>
    <div class="cart">
        <Head title="购物车"></Head>

            <div class="sub-child" v-if="userInfo.mobile?true:false">

                 <van-notice-bar
                left-icon="volume-o"
                color="#fff" 
                background="#333333"
                text="公告：APP全新改版 活动福利升级以及最新物流信息。"
                />

                <div class="clearAllBox">
                    <p @click="deletall">一键清空</p>
                </div>


                <!-- 购物车列表 -->
                <div class="cart_content">
                    <div class="goods_one_box" v-for="(v,i) in cart" :key="i">
                       
                        <van-swipe-cell>
                            <div class="choose_content">
                                <van-field class="choose" name="checkbox">
                                    <template #input>
                                        <van-checkbox @click="ischeck(v.check,v._id)" v-model="v.check" shape="round"  checked-color="#f8cc80"/>
                                    </template>
                                </van-field>

                                <van-card
                                    
                                    :price="v.cny_price"
                                    :desc="'重量' +v.weight +'kg'"
                                    :title="v.name"
                                    class="goods-card"
                                    :thumb="v.image_url"
                                />
                                <div @click="changenum(v.count,v._id)">
                                    <van-stepper class="count" v-model="v.count"  />
                                </div>
                                
                            </div>
                             
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" @click="deletit(v._id)"/>
                        </template>
                    </van-swipe-cell>
                    </div>


                    
                </div>



                <div class="nomore">
                    <p>—————— 没有更多了——————</p>
                </div>


            </div>

           <!-- 结算 -->
           <div class="cart_foot" v-if="userInfo.mobile?true:false">
               <div class="fleft">
                    <van-field class="all_choose" name="checkbox">
                                    <template #input>
                                        <van-checkbox v-model="checkboxall" shape="round"  checked-color="#f8cc80" @click="checkall(checkboxall)"/>
                                    </template>
                    </van-field>
                    <span>全选</span>
               </div>
               <div class="fright">
                   <div class="totalmony">
                       <h4>合计: ￥{{totalMoney}}</h4>
                       <p>(总重量:{{totalWeight}}kg)不含运费</p>
                   </div>
                   <div class="cash_btn" @click="gotocash">
                       结算({{totalQuantity}})
                   </div>
               </div>
           </div>

            



        <Foot></Foot>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {mapState,mapMutations} from 'vuex';
export default {
    data(){
        return{
            phone:'',
            value:1,
            // checkboxall:false,
            cart:[],
            // totalMoney:'',
        }
       
    },
   
    methods:{
        ...mapMutations(['setUserInfo']),
        changenum(count,id){
            // console.log(count,id)
            this.$ajax.setCart({
                count:count,
                _id:id
            }).then(res=>{

            })
        },
        deletit(id){
            console.log(id)
             this.$ajax.deletCart({
                _id:id
            }).then(res=>{
                if(res.code==200){
                     Toast.success(res.msg);
                     this.$ajax.getCart({
                            mobile:localStorage.getItem('mobile')
                        }).then(res=>{
                            if(res.code==200){
                                this.cart=res.result
                            }
                        })

                }else{
                     Toast.fail(res.msg);
                }
               
            })
        },
        deletall(){
            // console.log(1111)
            // this.checkboxall=false
            this.$ajax.deletCartAll().then(res=>{
                if(res.code==200){
                    Toast.success(res.msg);
                     this.$ajax.getCart({
                            mobile:localStorage.getItem('mobile')
                        }).then(res=>{
                            if(res.code==200){
                                this.cart=res.result
                            }
                        })
                }else{
                     Toast.fail(res.msg);
                }
            })
        },
        ischeck(ocheck,oid){
            // console.log(or)
            this.$ajax.setCartCheck({
                _id:oid,
                check:ocheck
            }).then(res=>{})

        },
        checkall(isall){
            for(var i=0;i<this.cart.length;i++){
                 this.$ajax.setCartCheck({
                     _id:this.cart[i]._id,
                    check:isall
                }).then(res=>{})
            }
          
        },
         gotocash(){
             if(this.totalQuantity==0){
                 Toast.fail("您还没选择物品呢");
             }else{
                 this.$router.push({name:'cash'});
             }
             
            
         },
    },
    computed:{
        ...mapState(['userInfo']),

        totalMoney:function(){
            let total = 0;
            
            for(let i = 0;i<this.cart.length;i++){
                if(this.cart[i].check){
                      total += this.cart[i].cny_price*this.cart[i].count
                }
            }
            return total.toFixed(2)
            
        },
        totalQuantity:function(){
            let num = 0;
            
            for(let i = 0;i<this.cart.length;i++){
                if(this.cart[i].check){
                      num += this.cart[i].count
                }
            }
            return num
            
        },
         totalWeight:function(){
            let kg = 0;
            
            for(let i = 0;i<this.cart.length;i++){
                if(this.cart[i].check){
                      kg += this.cart[i].weight*1
                }
            }
            return kg.toFixed(1)
            
        },
        checkboxall:{
             get(){
                let check = true;
                if(this.cart.length>0){
                        for(let i = 0;i<this.cart.length;i++){
                        check=check&&this.cart[i].check
                            
                    }
                    return check
                }else{
                    return false
                }
               
             },
             set(val){
                 for(let i = 0;i<this.cart.length;i++){
                 this.cart[i].check=val
                        
                }
             },
        
         
         },
        
        
         
        

    },
  
       


     mounted(){
        this.phone=localStorage.getItem('mobile')
        this.$ajax.getuserinfo().then(res=>{
            if(res.code==200){
                // console.log(res)
                this.setUserInfo(res.result)
            }else{
                this.$router.push({name:'login'})
            }
        })

        this.$ajax.getCart({
            mobile:localStorage.getItem('mobile')
        }).then(res=>{
            if(res.code==200){
                this.cart=res.result
            }
        })

        
        
    },
}
</script>


<style lang="scss" scoped>
.cart_foot{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 60px;
    background-color: #fff;
    .fleft{
        display: flex;
        width: 25%;
        font-size: 17px;
        font-weight: normal;
        align-items: center;
        .all_choose{
            padding: 0 8px;
            width: 30%;
        }
        span{
            padding-left: 5px;
        }

    }
    .fright{
        flex: 1;
        display: flex;
        .cash_btn{
            width: 22%;
            padding: 0 13px;
            text-align: center;
            background-color: #333;
            color: white;
            font-size: 15px;
            line-height: 41px;
            line-height: 50px;
        }
        .totalmony{
            flex: 1;
            text-align: right;
            padding: 0 13px 0 0;
            h4{
                font-size: 17px;
                padding-top: 5px;
            }
            p{
                font-size: 14px;
            }
        }

    }
}
.cart{
    padding-bottom: 150px;
}
    .cart_content{
     
        margin-top: 6.5px;
        background: #fff;
        .goods_one_box{
            // display: flex;
            .choose_content{
                display: flex;
                position: relative;
                .choose{
                    display: flex;
                    align-items: center;
                    width: 10%;
                    padding: 0;
                    padding-left: 10px;
                }
                .goods-card{
                  
                    padding: 13px 0;
                }
                .count{
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                }
            }
        }

    }
    .nomore{
        text-align: center;
        padding: 7px;
        color: #999;
    }
    .clearAllBox{
        background-color: #fff;
        padding: 13px;
        font-size: 14px;
        overflow: hidden;
        p{
            float: right;
        }
    }
     .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
    height: 100%;
  }
</style>